<template>
  <div class="schedule_wrapper">
    <div class="schedule_main">
      <!-- 学期下拉框 -->
      <el-select
        v-model="queryInfo.semesterId"
        placeholder="请选择"
        :disabled="true"
        @change="handleSemesterSelectChange"
      >
        <el-option
          v-for="item in selectSemesterList"
          :key="item.id"
          :label="item.semesterName"
          :value="item.id"
        />
      </el-select>
      <!-- 周数下拉框 -->
      <el-select
        v-model="queryInfo.weekNum"
        placeholder="请选择"
        @change="getSchedule"
      >
        <el-option
          v-for="item in selectWeekNumList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <!-- 批次下拉框 -->
      <el-select
        v-model="batchType"
        placeholder="请选择"
        @change="getSectionByBatchType"
      >
        <el-option label="第一批次" value="1" />
        <el-option label="第二批次" value="2" />
      </el-select>
      <!-- 课表头 -->
      <el-row class="rowHeader">
        <el-col
          v-for="(item, index) in weekHeaderRow"
          :key="index"
          :span="3"
        >
          <el-card
            class="week_header_bgc"
          >
            <div>
              <span>{{ item.weekDescription }}</span>
              <span v-if="item.weekDate">{{
                item.weekDate | formatTime("YYYY-MM-DD")
              }}</span>
              <span v-else>{{ item.weekDate }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 课表主体 -->
      <el-row v-for="(item1, index1) in sectionList" :key="index1">
        <!-- 第一列 -->
        <el-col
          :span="3"
        >
          <el-card class="section_bgc">
            <div>
              <span>{{ item1.sectionName }}</span>
              <span>{{ item1.sectionTime }}</span>
            </div>
          </el-card>
        </el-col>
        <!-- 每一行的课表 -->
        <el-col
          v-for="(item2, index2) in rowList[index1]"
          :key="index2"
          :span="3"
        >
          <el-popover
            :open-delay="200"
            :close-delay="0"
            placement="right-end"
            trigger="hover"
          >
            课程名称：{{ item2.courseName }}<br>
            实验名称：{{ item2.experimentName }}<br>
            课程班级：{{ item2.className }}<br>
            老师工号：{{ item2.teacherId }}<br>
            授课老师：{{ item2.teacherName }}<br>
            <el-card
              slot="reference"
              :class="item2.courseName ? 'course_bgc' : ''"
              style="font-size: 14px"
              @click.native="jumpToForm(item2)"
            >
              <i
                v-show="item2.courseName"
                class="el-icon-close delete-icon"
                @click="deleteSchedule(item2.id)"
              />
              <div>
                <span>{{ item2.courseName ? item2.courseName : "---" }}</span>
                <span>{{
                  item2.experimentName ? item2.experimentName : "---"
                }}</span>
                <span>{{ item2.teacherName ? item2.teacherName : "---" }}</span>
              </div>
            </el-card>
          </el-popover>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { isConfirm } from '@/utils/confirm'
import { checkAuth } from '@/utils/checkAuth'
import { getSchedule, deleteSchedule } from '@/api/scheduleApi'
import { getSemester, getSemesterById } from '@/api/semesterApi'
import { getSectionByBatchType } from '@/api/sectionApi'
export default {
  data() {
    return {
      // 查询排课信息表单
      queryInfo: {
        // 周数
        weekNum: '',
        // 学期 id
        semesterId: ''
      },
      // 学期信息
      selectSemesterList: [],
      // 周数信息
      selectWeekNumList: [],
      // 当前学期的周数
      semesterWeekTotal: 0,
      // 当前批次类型
      batchType: '1',
      // 排课节次信息数据
      sectionList: [],
      // 课表第一行信息
      weekHeaderRow: [],
      // 课表主体信息
      rowList: [],
      // 判断是否要进行的是删除操作
      isDelete: false,
      // 当前主学期
      currentSemesterId: '',
      // 当前日期处于主学期的周数
      currentWeekNum: ''
    }
  },
  created() {
    // 获取课表信息
    this.getScheduleTable()
    // 获取排课批次信息
    this.getSectionByBatchType()
  },
  methods: {
    // 获取课表信息
    async getScheduleTable() {
      // 获取学期信息
      const { data: res } = await getSemester()
      this.selectSemesterList = res.items
      // 获取到当前主学期，并赋值
      this.selectSemesterList.forEach(item => {
        if (item.isCurrentSemester) {
          this.queryInfo.semesterId = item.id
          // 设置周数
          this.semesterWeekTotal = item.semesterWeekTotal
          // 根据周数制造周数下拉框数据
          this.getSelectWeekNumList()
          // 计算当前是第几周
          // 当前学期起始日期
          const beginTime = Date.parse(item.semesterOriginDate)
          const currentTime = new Date().getTime()
          // 计算当前周数
          this.queryInfo.weekNum = Math.min(Math.ceil((currentTime - beginTime) / 86400000 / 7), this.semesterWeekTotal) + ''
          // 记录当前学期和当前日期所处周数
          this.currentSemesterId = this.queryInfo.semesterId
          this.currentWeekNum = this.queryInfo.weekNum
        }
      })
      // 获取排课信息
      this.getSchedule()
    },
    // 根据周数制造周数下拉框数据
    getSelectWeekNumList() {
      // 清空数据
      this.selectWeekNumList = []
      for (let i = 1; i <= this.semesterWeekTotal; i++) {
        const obj = {
          name: '第' + i + '周',
          value: i + ''
        }
        this.selectWeekNumList.push(obj)
      }
    },
    // 获取排课批次信息
    async getSectionByBatchType() {
      const { data: res } = await getSectionByBatchType(this.batchType)
      this.sectionList = res.items
    },
    // 获取排课信息
    async getSchedule() {
      const obj = {
        semesterId: this.queryInfo.semesterId,
        weekNum: Number(this.queryInfo.weekNum)
      }
      const { data: res } = await getSchedule(obj)
      this.weekHeaderRow = res.schedule.weekHeaderRow
      this.rowList = res.schedule.rowList
    },
    // 学期下拉框改变触发事件
    async handleSemesterSelectChange() {
      // 根据 id 查询学期
      const { data: res } = await getSemesterById(this.queryInfo.semesterId)
      // 重新对总学期周数赋值
      this.semesterWeekTotal = res.item.semesterWeekTotal
      // 重新制造周数下拉框数据
      this.getSelectWeekNumList()
      // 判断是否是当前学期
      if (res.item.id === this.currentSemesterId) {
        // 对当前所处周数进行初始化
        this.queryInfo.weekNum = this.currentWeekNum
      } else {
        // 默认第一周
        this.queryInfo.weekNum = '1'
      }
      // 重新获取排课信息
      this.getSchedule()
    },
    // 点击 el-card 跳转至添加排课或修改排课页面
    async jumpToForm(item) {
      // 判断当前是否要进行的是删除操作
      if (this.isDelete) return
      // 如果当前路由是 /schedule/preview，并且 item 有 id，直接返回
      // if (this.$route.path === '/schedule/preview' && item.id != null) return
      // 如果 item 没有 id，说明进行添加操作
      if (item.id == null) {
        if (!await checkAuth('添加排课')) return
        this.$router.push('/schedule/add/' + item.semesterId + '/' + item.weekNum + '/' + item.week + '/' + item.time)
      } else {
        if (!await checkAuth('编辑排课')) return
        this.$router.push('/schedule/edit/' + item.id)
      }
    },
    // 点击 x 号，删除排课
    async deleteSchedule(id) {
      this.isDelete = true
      // 验证当前是否操作是否有权限
      if (!await checkAuth('删除排课')) {
        this.isDelete = false
        return
      }
      // 对话框提示
      if (await isConfirm('此操作将永久删除该排课信息，是否继续？')) {
        // 确定删除，发送请求
        await deleteSchedule(id)
        this.$message.success('删除成功')
        // 重新请求数据
        this.getSchedule()
      }
      this.isDelete = false
    }
  }
}
</script>

<style scoped>
.schedule_wrapper .schedule_main .el-select {
  margin-bottom: 20px;
}
.schedule_wrapper .schedule_main /deep/ .el-row .el-col .section_bgc {
  background-color: skyblue;
}
.schedule_wrapper .schedule_main /deep/ .el-row .el-col .week_header_bgc {
  background-color: #dbf6fc;
}
.schedule_wrapper .schedule_main /deep/ .el-row .el-col .course_bgc {
  background-color: #fc9090;
}
.schedule_wrapper .schedule_main /deep/ .el-row .el-col .el-card {
  position: relative;
}
.schedule_wrapper .schedule_main /deep/ .el-row .el-col .el-card .delete-icon {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 999;
}
.schedule_wrapper .schedule_main /deep/ .el-row .el-col .el-card .el-card__body {
  display: table;
  margin: 0 auto;
  height: 93px;
  padding: 5px;
}
.schedule_wrapper .schedule_main /deep/ .el-row .el-col .el-card .el-card__body div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.schedule_wrapper .schedule_main /deep/ .el-row .el-col .el-card .el-card__body div span {
  display: block;
}
.rowHeader {
  position: sticky;
  top:-20px;
  z-index: 999;
}
</style>
